 @font-face {
     font-family: "iconfont";
     /* Project id 4773105 */
     src: url('iconfont.woff2?t=1733484132340') format('woff2'),
         url('iconfont.woff?t=1733484132340') format('woff'),
         url('iconfont.ttf?t=1733484132340') format('truetype');
 }

 .iconfont {
     font-family: "iconfont" !important;
     font-size: 32px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 .icon-luxiang2:before {
     content: "\e6dd";
 }

 .icon-tongxunlu:before {
     content: "\e650";
 }

 .Rectangle_13 {
     position: relative;
     top: 35px;
     left: 180px;
     width: 1210px;
     height: 665px;
     border: 5px solid rgb(192, 218, 238);
     border-radius: 20px;
     background-color: rgb(255, 255, 255);
     box-shadow: 0px 4px 30px 0px rgba(153, 227, 243, 0.99);
 }

 .Rectangle_1 {
     border-radius: 14px;
     box-shadow: 0px 4px 22px 0px rgba(209, 209, 209, 0.3);
     position: absolute;
     left: 100px;
     top: 120px;
     width: 1012px;
     height: 62px;
 }

 .choice {
     width: 878px;
     height: 62px;
     display: flex;
     justify-content: space-around;
     align-items: center;
 }

 li {
     list-style: none;
     display: inline-block;

 }

 a {
     text-decoration: none;
     color: black;
 }

 li a {
     font-family: PingFangSC;
     position: absolute;
     top: 15px;
     font-size: 20px;
     line-height: 32px;
     text-align: center;

 }

 li a:link {
     color: rgba(0, 0, 0, 0.55);
 }

 /* nav */
 li a:hover {
     color: rgb(57, 200, 210);
 }

 .logo {
     display: inline-block;
     position: relative;
     top: 34px;
     left: 40px;
     width: 62px;
     height: 60px;
     border-radius: 60px;
     box-shadow: 6px 6px 6px 4px rgba(0, 0, 0, 0.75);
 }

 .welcome {
     display: inline-block;
     font-size: 32px;
     position: relative;
     top: 30px;
     left: 45px;
     font-family: PingFangSC;
     color: rgb(0, 0, 0);
     line-height: 1.2;
     text-align: left;
 }

 .head {
     display: inline-block;
     width: 70px;
     height: 80px;
     position: relative;
     top: 50px;
     left: 824px;
     background-image: url(195.png);
     background-repeat: no-repeat;
 }

 .Vector {
     background-image: urL(Vector.png);
     background-repeat: no-repeat;
     position: absolute;
     top: 620px;
     left: 5px;
     width: 1500px;
     height: 50px;
 }

 .Background {
     border-radius: 12px;
     background-color: rgb(57, 200, 210);
     position: absolute;
     right: 56px;
     top: 570px;
     width: 58px;
     height: 28px;
     font-size: 12px;
     font-family: "PingFangSC";
     color: rgb(0, 0, 0);
     line-height: 2.4;
     text-align: center;

 }

 .email-tittle {
     font-size: 32px;
     font-family: "PingFangSC";
     color: rgb(0, 0, 0);
     line-height: 2.4;
     text-align: left;
     position: absolute;
     left: 42px;
     top: 255px;
 }

 .email-box {
     position: absolute;
     left: 170px;
     top: 320px;
     width: 920px;
     height: 286px;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     align-items: space-around;
     overflow: auto;
 }

 .email-box::-webkit-scrollbar {
     width: 0 !important;
 }

 .email-box {
     scrollbar-width: none;
     overflow-y: auto;
 }

 .email-background {
     border-radius: 7px;
     background-image: -moz-linear-gradient(0deg, rgb(230, 249, 252) 0%, rgb(255, 255, 255) 100%);
     background-image: -webkit-linear-gradient(0deg, rgb(230, 249, 252) 0%, rgb(255, 255, 255) 100%);
     background-image: -ms-linear-gradient(0deg, rgb(230, 249, 252) 0%, rgb(255, 255, 255) 100%);
     box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
     width: 898px;
     height: 84px;
     /* margin-bottom: 9px; */
 }

 .email-head {
     display: inline-block;
     width: 52px;
     height: 52px;
     background-repeat: no-repeat;
     margin-top: 16px;
     margin-left: 16px
 }

 .email-date {
     display: inline-block;
     font-size: 16px;
     font-family: "PingFangSC";
     color: rgb(153, 153, 153);
     line-height: 2.4;
     text-align: center;
     width: 62px;
     height: 11px;
     position: relative;
     top: -18px;
     left: 300px;
 }

 .email-content {
     position: relative;
     left: 84px;
     top: -18px;
     font-size: 16px;
     font-family: "PingFangSC";
     color: rgb(153, 153, 153);
     line-height: 1.2;
     text-align: center;
     width: 72px;
     height: 11px;
 }

 .delete {
     width: 60px;
     height: 14px;
     position: relative;
     top: -18px;
     left: 404px;

 }

 .reply {
     width: 60px;
     height: 14px;
     position: relative;
     top: -18px;
     left: 462px;
 }

 .text {
     font-size: 16px;
     font-family: "PingFangSC";
     color: rgb(153, 153, 153);
     line-height: 1.2;
 }

 .box {
     display: inline-block;
 }

 .unread {
     display: inline-block;
     border-radius: 6px;
     background-color: rgb(239, 249, 252);
     width: 84px;
     height: 48px;
 }

 .read {
     display: inline-block;
     border-radius: 6px;
     background-color: rgb(230, 249, 252);
     width: 84px;
     height: 48px;

 }

 .content {
     font-size: 16px;
     font-family: "Inter";
     color: rgb(0, 0, 0);
     line-height: 1.2;
     text-align: left;
     position: absolute;
     left: 28px;
     top: 14px;
 }

 .oval {
     border-width: 0.5px;
     border-color: rgb(0, 0, 0);
     border-style: solid;
     border-radius: 50%;
     position: relative;
     left: 16px;
     top: 17px;
     width: 7px;
     height: 7px;
 }

 .box a:hover {
     background-color: rgb(190, 246, 255);

 }